<template>
  <div>
    <HeaderBar />
    <div>
      <van-tabs swipeable line-height="0" title-active-color="#298EDC">
        <!-- 市场需求 START -->
        <van-tab title="市场需求">
          <div class="light-blue"></div>
          <div class="border-bottom p10 relative">
            <div class="pw10">
              <div class="h90 flex-b">
                <div class="h90 w190">
                  <div class="f20 van-multi-ellipsis--l2">AAAAAAAAAaaaaaaaAAAAAAAAAAASSSSS</div>
                  <div class="mt5">
                    <van-tag type="primary">发布中</van-tag>
                  </div>
                  <div class="f11 c-b5">
                    <div class="flex-b">
                      <p>2020-3-4</p>
                      <p class="text-1 w125">该项目装机总容量约为500-----------------</p>
                    </div>
                  </div>
                </div>
                <div class="w125 relative">
                  <img src="~assets/test.jpg"  class="img" alt />
                  <img src="~assets/join.png" class="tag-img" alt="">
                </div>
              </div>
            </div>
          </div>
          <div class="card text-center">
            <div class="card-item">名片</div>
            <div class="card-item f24 mt10">+</div>
          </div>
        </van-tab>
        <!-- 我的参与 START -->
        <van-tab title="我的参与">
          <div class="light-blue"></div>
          <div class="border-bottom p10 relative">
            <div class="pw10">
              <div class="h90 flex-b">
                <div class="h90 w190">
                  <div class="f20 van-multi-ellipsis--l2">AAAAAAAAAaaaaaaaAAAAAAAAAAASSSSS</div>
                  <div class="mt5">
                    <van-tag type="primary">发布中</van-tag>
                  </div>
                  <div class="f11 c-b5">
                    <div class="flex-b">
                      <p>2020-3-4</p>
                    </div>
                  </div>
                </div>
                <div class="w125">
                  <img src="~assets/test.jpg" class="img" alt />
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <footer-tabbar />
  </div>
</template>

<script>
import HeaderBar from "components/HeaderBar";
import FooterTabbar from "components/FooterTabbar";
export default {
  components: {
    HeaderBar,
    FooterTabbar
  }
};
</script>

<style scoped>
.light-blue {
  height: 8px;
  background: rgba(244, 243, 252, 1);
}
.w190 {
  width: 190px;
  word-break: break-all;
}
.w125 {
  width: 125px;
}
.tag-img{
  width: 22px;
  height: 22px;
  position: absolute;
  right: 0;
  top: 0;
}
.card {
  position: fixed;
  bottom: 80px;
  right: 40px;
}
.card-item {
  width: 36px;
  height: 36px;
  line-height: 36px;
  color: #fff;
  background: linear-gradient(
    -42deg,
    rgba(255, 38, 2, 1),
    rgba(255, 162, 0, 1)
  );
  box-shadow: 0px 4px 8px 0px rgba(0, 7, 63, 0.19);
  border-radius: 50%;
}
.img{
    width: 100px;
    max-height: 90px;
}
</style>